<template>
  <el-dialog
    :visible="showDialog"
    title="离职申请"
    @close="btnCancel"
  >
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      status-icon
      label-width="110px"
      :rules="rules"
    >
      <!--离职表单-->
      <el-form-item
        label="离职时间"
        prop="end_time"
      >
        <el-date-picker
          v-model="ruleForm.exceptTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
        />
      </el-form-item>
      <el-form-item
        label="离职原因"
        prop="reason"
      >
        <el-input
          v-model="ruleForm.reason"
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 8}"
          style="width: 70%;"
          placeholder="请输入内容"
        />
      </el-form-item>
    </el-form>
    <el-row
      slot="footer"
      type="flex"
      justify="center"
    >
      <el-col :span="6">
        <el-button
          size="small"
          type="primary"
          @click="btnOK"
        >确定</el-button>
        <el-button
          size="small"
          @click="btnCancel"
        >取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
// 接口
import { startProcess } from '@/api/approvals'

export default {
  // 组件名称
  name: 'DimissionDialog',
  // 组件参数 接收来自父组件的数据
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    userId: {
      require: true
    }

  },
  // 组件状态值
  data () {
    return {
      ruleForm: {
        exceptTime: '', // 离职事件
        reason: '', // 离职原因
        processKey: 'process_dimission', // 特定的审批
        processName: '离职'

      },
      rules: {
        exceptTime: [{ required: true, message: '离职时间不能为空', trigger: 'blur' }],
        reason: [{ required: true, message: '离职时间不能为空', trigger: 'blur' }]
      }
    }
  },
  // 组件方法
  methods: {
    btnOK () {
      this.$refs.ruleForm.validate(async isOK => {
        if (isOK) {
          await startProcess({ ...this.ruleForm, userId: this.userId })

          this.$message.success('提交成功')
          this.$emit('update:showDialog', false)
        }
      })
    },
    btnCancel () {
      this.$refs.ruleForm.resetFields()
      this.ruleForm = {
        exceptTime: '', // 离职事件
        reason: '', // 离职原因
        processKey: 'process_dimission', // 特定的审批
        processName: '离职'

      }
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style scoped lang="less">
</style>
